<template>
  <view class="wrap">
    <view class="header">
      <image
        class="header-bg"
        v-if="questionnaireCode == '4'"
        src="https://ainengli.meilianshuke.com/jkhx/weight/isi-bg.png"
        mode="scaleToFill"
      />
      <image
        class="header-bg"
        v-if="questionnaireCode == '5'"
        src="https://ainengli.meilianshuke.com/jkhx/weight/srss-bg.png"
        mode="scaleToFill"
      />
      <image
        class="header-bg"
        v-if="questionnaireCode == '6'"
        src="https://ainengli.meilianshuke.com/jkhx/weight/ais-bg.png"
        mode="scaleToFill"
      />
      <image
        class="header-bg"
        v-if="questionnaireCode == '7'"
        src="https://ainengli.meilianshuke.com/jkhx/weight/ess-bg.png"
        mode="scaleToFill"
      />
    </view>
    <view class="content-box">
      <view class="content-main">
        <text class="questionnaire-name">{{ questionnaireName }}</text>
        <view class="item">
          <text class="item-text">得分：</text>
          <text class="item-value">{{ scoreInfoData.score }}分</text>
        </view>
        <view class="item">
          <text class="item-text">判断：</text>
          <text class="item-value">{{ scoreInfoData.conclusion }}</text>
        </view>
        <view class="title">
          <view class="title-icon" />
          <text class="title-text">结果说明</text>
        </view>
        <text class="title-content" style="margin-bottom: 48rpx">{{ descContent }}</text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getQuestionnaireResult } from '../sleep.api'
import type { scoreData } from './sleepAssessmentModel'

const questionnaireName = ref('睡眠情况自评量表（SRSS）')
const descContent = ref('')

let questionnaireCode = ''
const userInfo = ref()
const scoreInfoData = ref<scoreData>({
  conclusion: '',
  score: ''
})

onShow(() => {
  if (uni.hideHomeButton) {
    uni.hideHomeButton()
  }
})

onLoad((options) => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo

  if (options && options.type) {
    questionnaireCode = options.type
    switch (options.type) {
      case '4':
        questionnaireName.value = '失眠严重程度指数 (ISI)'
        descContent.value = `根据你的总分，你将会理解你的失眠困扰和相关的推荐。但是，评估表测验是不能代替专业心理治疗师的评估和治疗。如有需要，记得向专业的精神健康人士如：临床心理治疗师或精神科医生寻求心理咨询。`
        break
      case '5':
        questionnaireName.value = '睡眠情况自评量表（SRSS）'
        descContent.value = `每个问题希望引出的症状如下（括号中为症状名称）： 
        1.您觉得平时睡眠足够吗?（睡眠时间不足） 
        2.您在睡眠后是否觉得已充分休息过了?（睡眠质量不高） 
        3.您晚上已经睡过觉,白天是否打瞌睡?（睡眠不足或觉醒不够） 
        4.您平时每个晚上大约能睡几小时?（睡眠时间） 
        5.您是否有入睡困难?（入睡困难） 
        6.您入睡后中间是否易醒? (睡眠不稳〉 
        7.您醒后是否难于再入睡?（早醒） 
        8.您是否多梦或常被恶梦惊醒?（多梦或梦魇、夜惊） 
        9.为了睡眠,您是否吃安眠药?（服药情况） 
        10.您失眠后心境如何?（睡眠态度和失眠后生理心理反应）`
        break
      case '6':
        questionnaireName.value = '阿森斯失眠量表（AIS）'
        descContent.value = `根据你的总分，你将会理解你的失眠情况。但是，评估表测验是不能代替专业心理治疗师的评估和治疗。如有需要，记得向专业的精神健康人士如：临床心理治疗师或精神科医生寻求心理咨询。`
        break
      case '7':
        questionnaireName.value = 'Epworth嗜睡量表（ESS）'
        descContent.value = `如果你的得分在11分以上，可以考虑去看睡眠医学专家来诊断和治疗你困倦的原因。`
        break
      default:
        break
    }
    getQuestionnaireResult({ id: options.questionnaireId, empi: userInfo.value.empi }).then(
      (res: any) => {
        scoreInfoData.value = res.data
      }
    )
  }
})
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  min-height: 100vh;
}

.header-bg {
  width: 100%;
  height: 574.84rpx;
}

.questionnaire-name {
  display: inline-block;
  margin-bottom: 32rpx;
  font-size: 44rpx;
  font-weight: 700;
  color: #222;
}

.content-box {
  position: absolute;
  top: 390rpx;
  left: 0;
  z-index: 2;
  width: 100%;
  padding: 32rpx;

  .content-main {
    padding: 32rpx;
    background: #fff;
    border: 1rpx solid #fff;
    border-radius: 16rpx;
  }
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;

  .title-icon {
    width: 8rpx;
    height: 32rpx;
    margin-right: 16rpx;
    background-color: #00d1b6;
    border-radius: 0 8rpx 8rpx 0;
  }

  .title-text {
    font-size: 36rpx;
    font-weight: 700;
    color: #222;
  }
}

.item {
  // display: flex;
  // align-items: center;
  margin-bottom: 32rpx;
  // justify-content: flex-start;

  .item-text {
    width: 96rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #222;
  }

  .item-value {
    font-size: 40rpx;
    font-weight: 700;
    color: #00d1b6;
  }
}

.title-content {
  display: inline-block;
  font-size: 26rpx;
  font-weight: 500;
  line-height: 44rpx;
  color: #666;
}
</style>
